${template "main_header.html"}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
  <tab-tag v-if="!urlobj.dialogstate"></tab-tag>

  <div style="margin:0 15px 15px 15px;">
    <el-card shadow="never" style="min-height:650px;">
      <div class="flex" style="flex-wrap: wrap; align-content: center; align-items: center; flex-direction: row; ">
        <div v-if="search_visible" id="search" class="search">
          <el-form ref="form" size="small" :model="searchData" inline>

            <el-form-item label="名称">
              <el-input v-model="searchData.名称" style="width: 160px;" clearable></el-input>
            </el-form-item>

            <el-form-item label="单位">
              <el-input v-model="searchData.单位" style="width: 128px;" clearable></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-button size="small" type="primary" @click="doSearch">查找</el-button>
            </el-form-item>

            <el-form-item label="">
              <div style="margin-left: 40px; border:#409eff 1px solid; background: #f2f6fc; padding:0 100px; cursor: pointer;">
                💰账户金额 ¥ <span style="color:red; font-size: 20px;">{{userProfile.balance}}</span> 元
                <el-divider direction="vertical"></el-divider>
                <span @click="dialog.cartShow=true">
                  <span>🛒 购物车</span> <span style="color:red; font-size: 20px;">{{cart.cnt}}</span> 件
                  <el-divider direction="vertical"></el-divider>
                  <span style="color:red;">点击这里查看购物车</span>。
                </span>
              </div>
            </el-form-item>

          </el-form>
        </div>

      </div>

      <el-table :row-class-name="rowClass" @selection-change="selection" @row-click="handleRowClick" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" ref="multipleTable" border class="eltable" :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="goods_sn" label="" width="80">
          <template slot-scope="{row}">
            <el-image :src="row.goods_img" @click="doModify(row)" />
          </template>
        </el-table-column>

        <el-table-column align="center" prop="goods_name" label="物品名称" width="200">
          <template slot-scope="{row}">
            <a href="javascript:;" @click="doModify(row)">{{row.goods_name}}</a>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="规格型号" label="规格型号">
          <template slot-scope="{row}">
            <el-tag effect="dark" size="mini" v-for="sku in row.sku" :key="sku.name">{{sku.name}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="goods_number" label="剩余数量" width="80" align="center"></el-table-column>

        <el-table-column prop="buy_max" label="buy_max" width="80" align="center">
          <template slot-scope="{row}">
            <div v-if="row.buy_max" class="text-green">{{row.buy_max}}</div>
            <div v-else>不限</div>
          </template>
        </el-table-column>

        <el-table-column prop="shop_price" label="价格" width="120" align="center"></el-table-column>

        <el-table-column prop="id" label="库存状态">
          <template slot-scope="scope">
            <span v-if="scope.row.goods_number < scope.row.warn_number" style="color:red;">库存紧张</span>
            <span v-else class="btn btn-xs radius">库存正常</span>
          </template>
        </el-table-column>

      </el-table>
      <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
    </el-card>

    <el-drawer title="查看详情" :visible.sync="dialog.detailDialogStatus" style="display: none;;" direction="rtl" size="80%">
      <Detail ref="detailDlg" :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refesh_list="index">
      </Detail>
    </el-drawer>

    <Detail :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @on-success="onSuccess"></Detail>
    <Cart :show.sync="dialog.cartShow" @on-success="onSuccess" />
  </div>

</div>


${template "user-cart.html"}
<script src="/assets/libs/treeselect/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="/assets/libs/treeselect/vue-treeselect.min.css">
<script src="/assets/admin/goods/detail.js?v=5970"></script>

<script>
  new Vue({
    el: '#app',
    components: {
      'treeselect': VueTreeselect.Treeselect,
      'draggable': window.vuedraggable,
    },
    data: function() {
      return {
        drawer_show: false,
        userProfile: {},
        opt_row: {},
        dialog: {
          addDialogStatus: false,
          updateDialogStatus: false,
          cartShow: false
        },
        searchData: {},
        loading: false,
        page_data: {
          limit: 20,
          page: 1,
          total: 20,
        },
        ids: [],
        single: true,
        multiple: true,
        search_visible: true,
        cart: {
          cnt: 0
        },
        list: [],
        class_id: [],
        supplier_id: [],
        updateInfo: {},
        detailInfo: {},
        device_type_arr: [],
        kakou_name_arr: [],
        step_arr: []
      }
    },
    methods: {
      doExport() {
        str = ""
        for (item in this.searchData) {
          str += item + '=' + this.searchData[item] + '&'
        }

        open('/admin/goods/exportExcel?' + str)
      },
      loadData() {
        this.index()
      },
      doSearch() {
        this.page_data.page = 1
        this.index()
      },
      index() {
        let param = {
          limit: this.page_data.limit,
          page: this.page_data.page
        }
        Object.assign(param, this.searchData)
        this.loading = true
        if (param.area_name && param.area_name != '') {
          localStorage.setItem("search_area_name_admin", param.area_name)
        } else {
          localStorage.removeItem("search_area_name_admin");
        }

        // 防止变量污染，去掉无用变量
        if (param.重点标注 !== undefined && param.重点标注 === false) {
          delete param.重点标注
        }

        axios.post('/user/cart/index.html', {
          limit: 10000,
          page: 1
        }).then(res => {
          if (res.data.status == 200) {
            this.cart.cnt = res.data.data.total

          } else {
            this.$message.error(res.data.msg);
          }
        })

        axios.post('/user/profile/detail', {}).then(res => {
          if (res.data.status == 200) {
            this.userProfile = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })

        axios.post('/admin/goods/list', param).then(res => {
          if (res.data.status == 200) {
            this.list = res.data.data.data
            this.page_data.total = res.data.data.total
            this.loading = false

            this.list.forEach(row => {
              if (row.sku) {
                row.sku = JSON.parse(row.sku)
              }
            })

            if (this.page_data.page == 1) {
              this.device_type_arr = res.data.device_type_arr
              this.kakou_name_arr = res.data.kakou_name_arr
              // this.class_id = res.data.sql_field_data.class_ids
              // this.supplier_id = res.data.sql_field_data.supplier_ids
            }
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      updateExt(row, field) {
        if (row.id) {
          axios.post('/admin/Device/updateExt', {
            id: row.id,
            [field]: row[field]
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      },
      onNext(nextFlag, updated_data) {
        switch (nextFlag) {
          case 'doIptRecord':
            this.doIptRecord(this.opt_row)
            this.list.forEach(element => {
              if (element.id == updated_data.id) {
                element = Object.assign(element, updated_data)
              }
            });
            break;

          default:
            break;
        }
      },
      doAdd() {
        this.dialog.updateDialogStatus = true
        this.updateInfo = {}
      },
      doModify(row) {
        this.updateInfo = row
        this.dialog.updateDialogStatus = true
      },
      onSuccess() {
        this.dialog.updateDialogStatus = false
        this.dialog.cartShow = false
        this.loadData()
      },
      doDelete(row) {
        this.$confirm('确定操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = row.id ? row.id : this.ids.join(',')
          axios.post('/admin/goods/delete', {
            id: ids
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.index()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {})
      },

      doViewDetail(row) {
        this.dialog.detailDialogStatus = true
        setTimeout(() => {
          this.$refs['detailDlg'].open(row.id);
        }, 800);
      },
      selection(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      handleRowClick(row, rowIndex, event) {
        if (event.target.className !== 'el-input__inner') {
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      },
      rowClass({
        row,
        rowIndex
      }) {
        for (let i = 0; i < this.ids.length; i++) {
          if (row.id === this.ids[i]) {
            return 'rowLight'
          }
        }
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.val,
          label: node.key,
          children: node.children
        }
      },
      fn(method) {
        this[method](this.ids)
      },
    },
    mounted() {
      let search_area_name = localStorage.getItem("search_area_name_admin");
      if (search_area_name) {
        this.searchData.area_name = search_area_name
      }
      this.index()
    },
  })
</script>


${template "main_footer.html"}